<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>CSS属性练习</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<style type="text/css">
body, div {
	padding: 10px
}

div {
	border: 1px solid #777;
}

body>div:nth-child(1) {
	float: left;
	width: 35%;
	height: 100%;
	overflow: auto
}

body>div:nth-child(2) {
	float: right;
	width: 60%;
	height: 100%;
	overflow: auto
}
li{
	padding: 2px
}
li:hover{
	background-color: #888;
	color: #fff;
}
li>*:nth-child(2),li>*:nth-child(3){
	float: right;
}
li>span{
	width:60%;
}
li>input{
	width:30%
}
h1{
	background-color: #eee;
}
</style>
</head>
<body style="height: 90%">
	<div>
		<h1>浮动与定位</h1>
		<div id="d1">
			<header>页头</header>
			<nav>侧边栏</nav>
			<article>内容</article>
			<footer>页脚</footer>
		</div>
	</div>
	<div id="lx">
		<h2>请按照要求完成对左边指定元素的样式进行修改</h2>
		<ol>
			<li v-for="(q,index) in qlist">
				<span>{{q.name}}</span>:
				<img v-bind:style="q" src="OK.png" width="20px" >
				<input v-bind:answer="q.answer" placeholder="请填写样式，例：color:green"
					v-on:click="a(q)"
					v-on:change="answer(q)"
					v-bind:value="q.answer"/>
			</li>
		</ol>
	</div>

	<script type="text/javascript">
		function Q(name, answer, selector, msg) {
			this.name = name;
			this.answer = answer;
			this.selector = selector;
			this.msg = msg;
			this.visibility = 'visible';
		}
		function q(name, answer, selector, msg) {
			return new Q(name, answer, selector, msg);
		}
		var qlist = [
			q('设置主版块颜色为#ddd', 'background-color:#ddd', '#d1'),
			q('设置主版块宽度为400px', 'width:400px', '#d1'),
			q('设置主版块高度为300px', 'height:300px', '#d1'),
			q('设置主版内部所有元素的外边距为0px', 'margin:0px', '#d1, #d1 *'),
			q('设置主版内部所有元素的内边距为0px', 'padding:0px', '#d1, #d1 *'),
			q('设置页头版块颜色为#ccc', 'background-color:#ccc', 'header'),
			q('设置侧边栏版块颜色为#bbb', 'background-color:#bbb', 'nav'),
			q('设置内容版块颜色为#aaa', 'background-color:#aaa', 'article'),
			q('设置页脚版块颜色为#999', 'background-color:#999', 'footer'),
			q('设置页头版块高度为30px', 'height:30px', 'header'),
			q('设置侧边栏版块高度为240px', 'height:240px', 'nav'),
			q('设置内容栏版块高度为240px', 'height:240px', 'article'),
			q('设置页脚版块高度为30px', 'height:30px', 'footer'),
			q('设置侧边栏版块宽度为80px', 'width:80px', 'nav'),
			q('设置内容栏版块宽度为320px', 'width:320px', 'article'),
			q('设置侧边栏版块浮动居左', 'float:left', 'nav'),
			q('设置内容栏版块浮动居右', 'float:right', 'article'),
			q('设置页脚版块使用both方式清除浮动', 'clear:both', 'footer'),
			q('设置主版内部所有元素文字水平居中', 'text-align:center', '#d1, #d1 *'),
			q('设置主版内部所有元素文字垂直居中', 'vertical-align: middle', '#d1, #d1 *', "燃鹅,并没什么X用....别猴急, 继续...."),
			q('设置页头版块的行高为30px', 'line-height:30px', 'header', "垂直居中,必须配合行高( line-height )才能起作用!!!"),
			q('设置侧边栏版块的行高为240px', 'line-height:240px', 'nav'),
			q('设置内容版块的行高为240px', 'line-height:240px', 'article'),
			q('设置页脚版块的行高为30px', 'line-height:30px', 'footer'),
			];
		//qlist.sort((a,b)=>{return Math.random()>.5 ? -1 : 1});

		var lx = new Vue({
			el : '#lx',
			data : {
				qlist : qlist,
			},
			methods : {
				answer : function(q) {
					if (event.srcElement.value) {
						var a1 = event.srcElement.value;
						var a2 = q.answer;
						var arr = a1.split(":");
						$(q.selector).css(arr[0], arr[1]);
						a1 = a1.replace(/\s+/g, '');
						a2 = a2.replace(/\s+/g, '');
						a1 = a1.toLowerCase();
						a2 = a2.toLowerCase();
						q.visibility = a1 == a2 ? 'visible' : 'hidden';
						if (a1 == a2 && q.msg) {
							alert(q.msg);
						}
					}
				},
				a : function(q) {
					if (event.altKey) {
						event.srcElement.value = q.answer;
						this.$options.methods.answer(q);
					}
				}
			}
		})
	</script>
</body>
</html>
